<template>
  <el-container class="template-view panel-block">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="template.type" @tab-change="getData">
        <el-tab-pane label="模板列表" name="template"></el-tab-pane>
        <el-tab-pane label="自定义页面" name="diypage"></el-tab-pane>
      </el-tabs>
      <div class="sa-title sa-flex sa-row-between">
        <span>列表</span>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button
            v-auth="'shop.admin.decorate.template.add'"
            icon="Plus"
            type="primary"
            @click="addTemplate"
            >新建模板</el-button
          >
          <el-button
            v-auth="'shop.admin.decorate.template.recyclebin'"
            type="danger"
            icon="Delete"
            plain
            @click="openRecyclebin"
            >回收站</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0 sa-m-0" v-loading="template.loading">
      <div v-if="template.list.length > 0" class="template-wrap sa-flex sa-flex-wrap">
        <template v-for="temp in template.list" :key="temp">
          <div class="item">
            <el-carousel
              trigger="click"
              height="480px"
              :autoplay="false"
              :loop="false"
              indicator-position="none"
            >
              <el-carousel-item v-for="page in temp.page" :key="page">
                <sa-image :url="checkUrl(page.image)" :suffix="{}"></sa-image>
              </el-carousel-item>
            </el-carousel>
            <div class="footer">
              <div class="name">{{ temp.name }}</div>
              <template v-if="template.type == 'template'">
                <div class="platform sa-flex">
                  <div class="label">支持平台：</div>
                  <div v-if="temp.platform">
                    <sa-icon
                      class="sa-m-r-8"
                      v-for="pl in temp.platform"
                      :key="pl"
                      :icon="'sa-shop-decorate-' + pl"
                      size="20"
                      :style="{
                        color: platformList.find((pf) => {
                          return pf.type == pl;
                        })?.color,
                      }"
                    />
                  </div>
                </div>
              </template>
              <div class="memo sa-flex">
                <div class="label">备注：</div>
                <div>{{ temp.memo }}</div>
              </div>
              <div class="update-time sa-flex">
                <div class="label">更新时间：</div>
                <div>{{ temp.update_time }}</div>
              </div>
              <div class="oper sa-flex sa-row-between">
                <el-button
                  v-auth="'shop.admin.decorate.page.detail'"
                  class="is-link"
                  type="primary"
                  size="small"
                  @click="decorateTemplate(temp.id)"
                >
                  装修
                </el-button>
                <div class="sa-flex">
                  <el-button
                    v-auth="'shop.admin.decorate.template.detail'"
                    class="is-link"
                    type="primary"
                    size="small"
                    @click="editTemplate(temp.id)"
                  >
                    编辑
                  </el-button>
                  <template v-if="template.type == 'template'">
                    <el-button
                      v-auth="'shop.admin.decorate.template.copy'"
                      class="is-link"
                      type="info"
                      size="small"
                      @click="onCopy(temp.id)"
                    >
                      复制
                    </el-button>
                    <el-button
                      v-auth="'shop.admin.decorate.template.status'"
                      class="is-link"
                      :type="temp.status == 'enable' ? 'success' : 'info'"
                      size="small"
                      @click="onStatus(temp)"
                    >
                      {{ temp.status_text }}
                    </el-button>
                  </template>
                  <el-popconfirm
                    width="fit-content"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    title="确认删除这条记录?"
                    @confirm="deleteTemplate(temp.id)"
                  >
                    <template #reference>
                      <el-button
                        v-auth="'shop.admin.decorate.template.delete'"
                        class="is-link"
                        type="danger"
                        size="small"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <sa-empty v-if="template.list.length == 0" />
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: 'shop.admin.decorate.template',
};
</script>
<script setup>
import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { api } from '../decorate.service';
import { useModal } from '@/sheep/hooks';
import { platformList } from '../page/data';
import TemplateEdit from './edit.vue';
import TemplateRecyclebin from './recyclebin.vue';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
const router = useRouter();

const template = reactive({
  loading: false,
  type: 'template',
  list: [],
});

async function getData() {
  template.loading = true;
  const { error, data } = await api.template.list({
    search: JSON.stringify({ type: [template.type] }),
  });
  if (error === 0) {
    template.list = data;
    template.loading = false;
  }
}
function addTemplate() {
  useModal(
    TemplateEdit,
    { title: '新建', type: 'add', templateType: template.type },
    {
      confirm: () => {
        getData();
      },
    },
  );
}
function decorateTemplate(id) {
  router.push(`/shop/admin/decorate/page?id=${id}&fromType=${template.type}`);
}
function editTemplate(id) {
  useModal(
    TemplateEdit,
    {
      title: '编辑',
      type: 'edit',
      id: id,
      templateType: template.type,
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}
async function deleteTemplate(id) {
  await api.template.delete(id);
  getData();
}

async function onCopy(id) {
  await api.template.copy(id);
  getData();
}

async function onStatus(item) {
  await api.template.status(item.id, {
    status: item.status == 'enable' ? 'disabled' : 'enable',
  });
  getData();
}

function openRecyclebin() {
  useModal(
    TemplateRecyclebin,
    {
      title: '回收站',
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.template-view {
  .template-wrap {
    padding: 10px var(--sa-padding);
    .item {
      position: relative;
      width: 246px;
      height: 480px;
      border: 1px solid var(--sa-space);
      box-shadow: 0 0 4px rgba(89, 89, 89, 0.2);
      box-sizing: border-box;
      border-radius: 4px;
      margin-bottom: var(--sa-padding);
      overflow: hidden;
      margin-right: 20px;
      img {
        width: 100%;
      }
      &:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 16px rgba(89, 89, 89, 0.24);
        .footer {
          opacity: 1;
        }
      }
      :deep() {
        .image-slot {
          height: 200px;
        }
      }
      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: fit-content;
        padding: 0 12px;
        background: var(--sa-background-assist);
        transition: all 0.5s;
        opacity: 0;
        .name {
          padding: 12px 0 4px;
          color: var(--sa-title);
          font-size: 16px;
        }
        .platform {
          height: 28px;
          font-size: 14px;
          color: var(--sa-subtitle);
        }
        .memo,
        .update-time {
          height: 20px;
          font-size: 12px;
          color: var(--sa-subfont);
        }
        .label {
          flex-shrink: 0;
        }
        .oper {
          height: 36px;
          .el-button + .el-button {
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>
